<template>
    <div class="title">课程标准</div>
    
    <div class="list">
        <span>我的课程：</span>
        <template v-if="isListLoad">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="departmentName" label="开课单位" width="230"/>
                <el-table-column prop="courseId" label="课程编号" width="180"/>
                <el-table-column prop="courseName" label="课程名称"/>
                <el-table-column prop="courseHour" label="总学时"/>
                <el-table-column prop="credits" label="学分"/>
                <el-table-column prop="type" label="课程类别"/>
                <el-table-column prop="" label="操作">
                    <template #default="scope">
                        <el-button type="primary" @click="handleBrowse(scope.row.courseId)">
                            查看课程标准
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
    <VuePdfEmbed v-if="isPDFLoad" annotation-layer text-layer
                 :source="pdfSource" @rendering-failed="handleLoadFail"/>
</template>

<script setup lang="ts">

import VuePdfEmbed from 'vue-pdf-embed'
// essential styles
import 'vue-pdf-embed/dist/style/index.css'
// optional styles
import 'vue-pdf-embed/dist/style/annotationLayer.css'
import 'vue-pdf-embed/dist/style/textLayer.css'
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import {getTeacherCourseStandard} from "@/service/teacher/teacher.service";
import {searchStudentCourseStandard} from "@/service/student/student.service";

const inputCourseId = ref('')
const inputCourseName = ref('')
const isPDFLoad = ref(false)
const selectDepartment = ref('')
const isListLoad = ref(false)
const tableData = ref([])
var pdfSource: string

onMounted(() => {
    getTeacherCourseStandard((data: any) => {
        let courseIdList: string[] = ['']
        // 当前教师课程列表
        console.log(data)
        let teacherCourseStandardList = data.teacherCourseStandardList
        for (const teacherCourseStandard of teacherCourseStandardList) {
            // 重复课程判断
            if (!courseIdList.includes(teacherCourseStandard.courseId)) {
                courseIdList.push(teacherCourseStandard.courseId)
                tableData.value.push(teacherCourseStandard)
            }
        }
    })
    
    isListLoad.value = true
})

function handleLoadFail() {
    ElMessage({
        message: "操作有误",
        type: "error",
        duration: 2000
    });
}


function handleBrowse(courseId: any) {
    isPDFLoad.value = false
    console.log(courseId)
    pdfSource = searchStudentCourseStandard(courseId)
    isPDFLoad.value = true
}
</script>


<style scoped>
.title {
    font-size: 20px;
    margin-bottom: 10px;
}

.option {
    margin-bottom: 20px;
}
</style>